Day 8--RecyclerView(一)簡介

12th鐵人賽

Kai

團隊好想工作室 v4.0

2020-09-23 09:16:10

3184 瀏覽

分享至

RecyclerView

可上下或左右的滾/滑動列表清單
這裡將列表中的每一個項目稱爲item

新增recyclerview的item layout

首先視需要決定recyclerview顯示列表的每個item內容爲何,先新增並設計一個item layout

例如我們想做一個姓名,電話,地址的聯絡人清單

在activity_main layout中直接加入recyclerview元件

於屬性加入tools:listitem,可先在ide中預覽,例如

 <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@layout/person_item"/>

新增item的data class與list

新增一個Person.kt檔,定義需要的data class與其屬性
再新增list爲提供給recyclerview顯示
例如

data class Person(
    val name: String, 
    val phone:String, 
    val address: String
    )

class ItemList : ArrayList<Person>()

val itemList = ItemList()

新增recyclerview adapter

新增一個recyclerview adapter,用來管理item並顯示於畫面
用法爲寫一個class繼承自RecyclerView.Adapter<>()
此類別內再定義一個class繼承自RecyclerView.ViewHolder()

class RvAdapter() : RecyclerView.Adapter<RvAdapter.myHolder>() {

    private val list = mutableListOf<Person>()

    class myHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val rvName: TextView = itemView.tv_name
        val rvAddress: TextView = itemView.tv_address
        val rvPhone: TextView = itemView.tv_phone
    }
    
}

接着必須要implement覆寫的有三個方法

onCreateViewHolder()
getItemCount()
onBindViewHolder()

onCreateViewHolder()

onCreateViewHolder()是將item layout建立並回傳view holder

   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): myHolder {
        val createView = LayoutInflater.from(parent.context).inflate(
            R.layout.person_item, parent, false
        )
        return myHolder(createView)
    }

getItemCount()

回傳list的size,RecyclerView依據getItemCount顯示資料筆數

override fun getItemCount(): Int {
        return list.size
    }

onBindViewHolder()

將資料與每個清單列表位置的view holder綁定,並傳入recycler view
在滑動時更換holder內的資料

    override fun onBindViewHolder(holder: myHolder, position: Int) {
        val currentItem = list[position]
        holder.rvName.text = currentItem.name
        holder.rvAddress.text = currentItem.address
        holder.rvPhone.text = currentItem.phone
    }

以上大致就完成recycler view adapter的設置

而當我們要給recycler view顯示的資料有異動時,例如新增,移除
要呼叫notifyDataSetChanged()來讓recycler view更新
所以可再自訂一個update(),呼叫時提供引數傳入
範例adapter如下

class RvAdapter() : RecyclerView.Adapter<RvAdapter.myHolder>() {

    private val list = mutableListOf<Person>()

    class myHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val rvName: TextView = itemView.tv_name
        val rvAddress: TextView = itemView.tv_address
        val rvPhone: TextView = itemView.tv_phone
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): myHolder {
        val createView = LayoutInflater.from(parent.context).inflate(
            R.layout.person_item, parent, false
        )
        return myHolder(createView)
    }

    override fun getItemCount(): Int {
        return list.size
    }

    override fun onBindViewHolder(holder: myHolder, position: Int) {
        val currentItem = list[position]
        holder.rvName.text = currentItem.name
        holder.rvAddress.text = currentItem.address
        holder.rvPhone.text = currentItem.phone
    }

    fun update(updateList: MutableList<Person>) {
        list.clear()
        list.addAll(updateList)
        notifyDataSetChanged()
    }
}

回到MainActivity.kt,將recycler view adapter以及layoutmanager實作出來

class MainActivity : AppCompatActivity() {

    private val myAdapter = RvAdapter()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recycler_view.adapter = myAdapter
        recycler_view.layoutManager = LinearLayoutManager(this)
        
        ...

    }

將資料建立後,即呈現如下